<template>
  <div class="pad-20 pad-b-20 bgc-white">
    <div v-for="(item, index) of 3" :key="index" class="list mar-b-20">
      <div class="flex flex-between subject">
        <span>抖音小店店铺</span>
        <span class="cursor-p v-align-c" @click="showAllShop">查看全部<el-icon color="#000"><arrow-right /></el-icon></span>
      </div>
      <el-row class="pad-l-20 pad-r-20 pad-b-20" :gutter="28" :class="showAll ? 'animation-show': 'list-item-height'">
        <el-col v-for="(item1, index1) of 5" :key="index1" :span="6" class="shop-box">
          <div class="shop-info flex-col mar-t-20 pad-t-14 pad-b-14 position-r">
            <div class="flex pad-l-14 pad-r-14">
              <img class="width-36 height-36" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d" alt="">
              <span class="flex mar-l-10">望远镜的小商店</span>
            </div>
            <div class="flex pad-l-14 pad-r-14 mar-t-10">
              <div class="flex-col">
                <span class="font-12 font-color-9">授权时间</span>
                <span class="font-12 font-color-3">2022-02-12 12:20</span>
              </div>
              <div class="flex-col update-stock">
                <span class="font-12 font-color-9">更新库存比例</span>
                <span class="font-12 font-color-3">100%</span>
              </div>
            </div>
            <div class="flex btn-group">
              <el-button type="text" size="default">编辑</el-button>
              <el-button type="text" size="default">地址列表</el-button>
              <el-button type="text" size="default">删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    ArrowRight
  },
  setup() {
    const showAll = ref(false)
    const showAllShop = () => {
      showAll.value = !showAll.value
    }
    return {
      showAll,
      showAllShop
    }
  }
})
</script>

<style lang="scss" scoped>
.list {
  background: #F9FAFC;
  .shop-box {
    .shop-info {
      width: 260px;
      height: 154px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px 0px rgba(185, 185, 185, 0.16);
      border-radius: 4px;
    }
  }
}
.subject {
  padding: 17px 19px;
  border-bottom: 1px solid #F5F5F5;
}
.list-item-height {
  height: 186px;
  overflow: hidden;
}
.animation-show {
  animation: 'expend' 1s;
}
@keyframes expend {
  0% {height: 140px}
  100% {height: auto}
}
.btn-group {
  width: 100%;
  background: #fff;
  border-top: 1px solid #f5f5f5;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  left: 0;
}
.update-stock {
  margin-left: 41px;
}
</style>
